import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';

export default function Detail(props) {
  console.log(props);
  // console.log(props.match.params);

  return (
    <div>
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      Detail页面
      {/* 两种写起来都比5麻烦 */}
      <NavLink
        to="/Detail/Rou1"
        className={({ isActive }) => {
          return isActive ? 'select' : '';
        }}
        // style={({ isActive }) => {
        //   return isActive ? { color: '#fff', backgroundColor: 'pink' } : {};
        // }}
      >
        鏈接1
      </NavLink>
      <NavLink
        to="/Detail/Rou2"
        className={({ isActive }) => {
          return isActive ? 'select' : '';
        }}
        // style={({ isActive }) => {
        //   return isActive ? { color: '#fff', backgroundColor: 'pink' } : {};
        // }}
      >
        链接2
      </NavLink>
      <Outlet />
    </div>
  );
}
